<template>
    <div>
      <div ref="sky" class="bg"></div>
    </div>
  </template>
  
  <script>
  export default {
    mounted() {
      this.star()
    },
    methods: {
      star() {
        var width = document.body.clientWidth - 20
        var height = document.body.clientHeight - 20
  
        //随机生成星星
        for (var i = 0; i < 70; i++) {
          var star = document.createElement('div')
          star.className = 'hStar'
          star.style.left = Math.random() * width + 'px'
          star.style.top = Math.random() * height + 'px'
          star.style.animationDelay = Math.random() * 3 + 's' //添加动画延迟时间
          this.$refs.sky.appendChild(star)
        }
  
        //随机生成流星
        for (var i = 0; i < 10; i++) {
          var lx1 = document.createElement('div')
          lx1.className = 'star'
          lx1.style.right = (Math.random() * 400 + 150) + 'px'
          lx1.style.top = (Math.random() * 200 + 0) + 'px'
          lx1.style.animationDelay = Math.random() * 3 * i + 's' //添加动画延迟时间
          this.$refs.sky.appendChild(lx1)
          var lx2 = document.createElement('div')
          lx2.className = 'star'
          lx2.style.left = (Math.random() * 400 + 250) + 'px'
          lx2.style.top = (Math.random() * 200 + 0) + 'px'
          lx2.style.animationDelay = Math.random() * 3 * i + 's' //添加动画延迟时间
          this.$refs.sky.appendChild(lx2)
        }
      }
    },
  };
  </script>
  
  <style scoped lang="less">
  .bg{
    position: fixed;
    top: 0;
    left: 0;
    // background-color: rgb(40,40,40);
    height: 100vh;
    width: 100%;
  }
  /deep/ .star {
    width: 1px;
    display: block;
    position: fixed;
    background-color: transparent transparent transparent rgba(255, 255, 255, .8);
    opacity: 0;
    animation: star 6s linear infinite;
  }
  
  /deep/ .star::after {
    content: '';
    display: block;
    border: 3px solid #fff;
    border-width: 0px 90px 2px 90px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .5);
    transform: rotate(-45deg);
  }
  
  @keyframes star {
    0% {
      opacity: 0;
    }
  
    30% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
      transform: translate(-1500px, 600px);
    }
  }
  
  /deep/ .hStar {
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 50%;
    box-shadow:0 0 4px 4px  rgb(255, 255, 255);
    opacity: 0;
    position: fixed;
    left: 0px;
    top: 0px;
    animation: myStar 4s ease-in-out infinite;
    z-index: 10;
  }
  
  @keyframes myStar {
    0% {
      opacity: 0;
    }
  
    50% {
      opacity: 0.4;
    }
  
    100% {
      opacity: 0;
    }
  }
  </style>
